<script setup>
import { ref, reactive,  onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue'
import { message } from 'ant-design-vue'
import { cloneDeep } from 'lodash-es'
import useFormEvent from '@/core/hooks/useFormEvent'
import spuApi from '@/api/goods/SpuApi'
import tagsApi from '@/api/content/TagsApi'
import categoryApi from '@/api/goods/CategoryApi'
import attributeApi from '@/api/goods/AttributeApi'
import configApi from '@/api/system/ConfigApi'

import DEditor from '@/components/DEditor.vue'
import ImageSelecter from '@/components/ImageSelecter.vue'
// import GoodsSelecter from './components/GoodsSelecter.vue'
import BrandSelecter from './components/BrandSelecter.vue'
const formRef = ref() // 表单ID

const state = reactive({
  visible: false,
  loading: false,
  activeKey: 'base',
  unitOptions: [], // 单位选项
  tagsOptions: [], // 标签
  categoryOptions: [], //分类
  attrTemplates: [], // 属性模板
  attrTemplateId: '',
  
  skuColumns: [],
  // 
  tagInputVisible: {},
  tagInputValue: {},
  // 
  optInputVisible: false,
  optInputValue: '',
  // 规格类型
  standard: 'single',
  // 运费模板
  expressTemplates: [],
  recommendOptions: [{ label: '热卖单品', value: '1' },{ label: '促销单品', value: '2' },
    { label: '精品推荐', value: '3' },{ label: '首发单品', value: '4' },{ label: '优品推荐', value: '5' }]
})
//
const batchSku = reactive({
  thumb: '',
  price: 0,
  pv: 0,
  availQty: 0
})
// 表单数据
const formState = reactive({})
// 表单结构
const original = {
  id: null, 
  catalogId: 0,
  type: {},
  name: '',
  images:[],
  retailPrice: 0,
  buyingPrice: 0,
  unit: '',
  volume: 0,
  tags: [],
  weight: 0,
  keywords: '',
  notes: '',
  brand: null,
  idx: 0, 
  attrs: {standard: 'SINGLE' },  // 属性规格
  extend: {},

  skuList: [{thumb: '', barCode: '', spec: '', price: 0, pv: 0, availQty: 0  }],  // SKU
  //物流方式
  shipMode: 'express',
  expressFeeType: 'fixed',
  expressPrice: 0,
  expressTemplateId: 0,
  // 营销
  marketing: {
    recommend: [],
    soldQty: 0,
    giftScore: 0,
    giftCoupon: [],
    minBuyQty: 1,
    isLimitBuy: 'NO',
    limitBuyType: 'TIMES',
    limitBuyQty:1,
    isPreSale: 'NO',
    unionGoods: []
  },
}
// 表单 处理
const { onCancel, onFinish, InitializeData } = useFormEvent({state: state, remoteApi: spuApi, formState: formState, original: original, formRef: formRef})
// 重写初始化
const initializationData = primaryKey=>{
  InitializeData(primaryKey).then(()=>{
    state.skuColumns = [] 
    state.skuColumns.push({ title: '图片', dataIndex: 'thumb',  key:'price', width: '160px' })
    if(formState.skuList.length>0){
      Object.keys(formState.skuList[0]).forEach(key=>{
        if( ['thumb', 'price', 'pv', 'availQty', 'operation'].indexOf(key) == -1){
          let column = { title: key, dataIndex: key,  key:key  }
          state.skuColumns.push(column)
        }
      })
    }
    state.skuColumns.push({ title: '单价', dataIndex: 'price',  key:'price', width: '160px' })
    state.skuColumns.push({ title: '价值', dataIndex: 'pv',  key:'pv', width: '160px' })
    state.skuColumns.push({ title: '库存量', dataIndex: 'availQty',  key:'availQty', width: '160px' })
    state.skuColumns.push( { title: '操作', dataIndex: 'operation',  fixed: 'right',  width: '100px'  })
  })
  state.attrTemplateId =''
}
// 向父组件暴露方法和属性
defineExpose({ InitializeData: initializationData })


//过滤选中项
//const filteredTags = computed(() => state.tagsOptions.filter(o => !formState.tags.includes(o.value)))
// 确认选中属性模板
const onConfirmAttr =()=>{
  let templ = state.attrTemplates.find(item=>item.id== state.attrTemplateId)
  formState.attrs.ownAttrs = cloneDeep(templ?.options)
}
// 生成SKU
const onGenerateSKU=()=>{
  formState.skuList =  formState?.attrs?.ownAttrs.reduce((a, b) => {
    let res=[]
    a.map(x=>{
      b.data.map(y=>{
        res.push({...x,[b.name]:y})
      })
    })
    return res
  },[{}])
  formState.skuList.forEach(item=>{
    item['price']= 0, item['pv']= 0, item['availQty']= 0
  })
  state.skuColumns = []
  state.skuColumns.push({ title: '图片', dataIndex: 'thumb',  key:'price', width: '160px' })
  formState.attrs.ownAttrs.forEach(item=>{
    let column = { title: item.name, dataIndex: item.name,  key:item.name  }
    state.skuColumns.push(column)
  })
  // 
 
  state.skuColumns.push({ title: '单价', dataIndex: 'price',  key:'price', width: '160px' })
  state.skuColumns.push({ title: '价值', dataIndex: 'pv',  key:'pv', width: '160px' })
  state.skuColumns.push({ title: '库存量', dataIndex: 'availQty',  key:'availQty', width: '160px' })
  state.skuColumns.push( { title: '操作', dataIndex: 'operation',  fixed: 'right',  width: '100px'  })
}
// 称去SKU
const onRemoveSKU =(row)=>{
  formState.skuList =  formState.skuList.filter(item=> item!==row)
}
// 切换SKU规格
const onChangeAttrStandard =(e)=>{
  formState.skuList= e.target.value =='multi'? [] :[{thumb: '', barCode: '', spec: '', price: 0, pv: 0, availQty: 0  }]
}
// 更新所有规格值
const onEditBatckSku=()=>{
  formState.skuList.forEach(item=>{
    item.thumb = batchSku.thumb
    item.price= batchSku.price
    item.pv = batchSku.pv
    item.availQty = batchSku.availQty
  })
}
// 生命周期-----------------------------
onBeforeMount(() => {
  console.log('vue3 中的生命周期 onBeforeMount')
})
// 加载选项
onMounted(() => {
  // 加载标签
  tagsApi.getOptions().then(res=>{
    state.tagsOptions = res.data
  })
  // 加载类型
  categoryApi.getTreeOptions().then(res => {
    state.categoryOptions.push(res.data)
  })
  // 属性模板
  attributeApi.getListData({}).then(res=>{
    state.attrTemplates = res.dataList
  })
  // 单位选项
  configApi.getOptionsByCode('GOODS.UNIT').then(res=>{
    state.unitOptions = res.data
  })
})

onBeforeUpdate(() => {
  console.log('vue3 中的生命周期 onBeforeUpdate')
})

onUpdated(() => {
  console.log('vue3 中的生命周期 onUpdated')
})

onBeforeUnmount(() => {
  console.log('vue3 中的生命周期 onBeforeUnmount')
})
onUnmounted(() => {
  console.log('vue3 中的生命周期 onUnmounted')
})
/********************************* */
const onShowOptionInput = () => {
  state.optInputVisible = true
  state.optInputValue =''
}
const handleOptionInputConfirm=()=>{
  if(state.optInputValue ==''){
    message.error('请输入属名')
    return
  }
  if(formState.attrs.ownAttrs.some(it=> it.name==state.optInputValue)) {
    message.error('该属名已存在了')
    return
  }
  let item = {name: state.optInputValue, data: []}
  formState.attrs.ownAttrs.push(item) 
  state.optInputVisible = false
}
// 移去整个属性项
const onRemoveOption=(item)=>{
  //delete formState.options[key]
  formState.attrs.ownAttrs =  formState.attrs.ownAttrs.filter(it=> it.name != item.name )
}
// 
const onCloseTag =(tag, item)=>{
  item.data = item.data.filter(it=> it != tag)
}
const onShowTagInput = (item) => {
  state.tagInputVisible[item.name] = true
  state.tagInputValue[item.name] = ''
}
const handleTagInputConfirm = (item) => {
  const inputValue = state.tagInputValue[item.name]
  let tags = item.data
  if (inputValue && tags.indexOf(inputValue) === -1) {
    item.data = [...tags, inputValue]
  }
  delete state.tagInputValue[item.name]
  delete state.tagInputVisible[item.name]
}

</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`商品管理`"
    placement="right"
    :width="'80%'"
  >
    <template #extra>
      <a-button type="link" @click="state.visible=false">关闭</a-button>
    </template>
    <a-card hoverable>
      <!-- 表单内容 begin -->
      <a-form
        ref="formRef"
        :model="formState"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 10}"
        :scroll-to-first-error="true"
        @finish="onFinish"
      >
        <a-tabs v-model:activeKey="state.activeKey">
          <!-- 基本资料 -->
          <a-tab-pane key="base">
            <template #tab>
              <span><group-outlined /> 基本信息</span>
            </template>
            <a-row>
              <a-col :span="12">
                <a-form-item
                  label="分类" name="catalogId"
                  :rules="[{ required: true, message: '请选择!' }]">
                  <a-tree-select
                    v-model:value="formState.catalogId" placeholder="请选择分类" show-search allow-clear
                    :tree-default-expand-all="true" :tree-data="state.categoryOptions" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="商品名称" name="name"
                  :rules="[{ required: true, message: '请输入商品名称!' }]">
                  <a-input
                    v-model:value="formState.name" 
                    placeholder="商品名称" show-count :minlength="2" :maxlength="50"
                    allow-clear size="large" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="零售价" name="retailPrice">
                  <a-input-number
                    v-model:value="formState.retailPrice" prefix="￥" placeholder="零售价" 
                    :precision="2" :min="0" allow-clear size="large" style="width:180px" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="进货价" name="buyingPrice">
                  <a-input-number
                    v-model:value="formState.buyingPrice"
                    prefix="￥" placeholder="进货价" 
                    :precision="2" :min="0" allow-clear size="large" style="width:180px" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="单位" name="unit" :rules="[{ required: true, message: '请选择单位!' }]">
                  <a-select v-model:value="formState.unit" placeholder="单位" :options="state.unitOptions" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="品牌" name="brand" :rules="[{ required: true, message: '请选择品牌!' }]">
                  <a-form-item-rest>
                    <brand-selecter v-model="formState.brand" :multi="false" />
                  </a-form-item-rest>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="体积(m3)" name="volume">
                  <a-input-number
                    v-model:value="formState.volume" placeholder="体积" :precision="2" :min="0" 
                    allow-clear size="large" style="width:180px" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="重量(kg)" name="weight">
                  <a-input-number
                    v-model:value="formState.weight" placeholder="重量" :precision="2" :min="0" 
                    allow-clear size="large" style="width:180px" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="标签" name="tags" :rules="[{ required: true, message: '请输入标签!' }]">
                  <a-select
                    v-model:value="formState.tags" :token-separators="[',']"
                    mode="tags" size="large" allow-clear placeholder="请输入标签!" :options="state.tagsOptions" />
                </a-form-item>
              </a-col> 
              <a-col :span="12">
                <a-form-item label="排序" name="idx">
                  <a-input-number v-model:value="formState.idx" :min="0" :max="100" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item
                  label="图片" name="images" :label-col="{span:3}" :wrapper-col="{ span: 21}"
                >
                  <a-form-item-rest>
                    <image-selecter v-model="formState.images" :limit="8" />
                  </a-form-item-rest>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item
                  label="简介" name="notes" :label-col="{span:3}" :wrapper-col="{ span: 18}">
                  <a-textarea v-model:value="formState.notes" :rows="4" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-tab-pane>
          <!-- 库存规格 -->
          <a-tab-pane key="sku" force-render>
            <template #tab>
              <span><file-markdown-outlined /> SKU 库存规格</span>
            </template>
            <a-row>
              <a-col :span="24">
                <a-form-item label="规格类型" :name="['attrs', 'standard']" :label-col="{span:3}" :wrapper-col="{ span: 10}" :rules="{ required: true, message: 'domain can not be null' }">
                  <a-radio-group v-model:value="formState.attrs.standard" @change="onChangeAttrStandard">
                    <a-radio-button value="SINGLE">单规格</a-radio-button>
                    <a-radio-button value="MULTI">多规格</a-radio-button>
                  </a-radio-group>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row v-if="formState.attrs.standard=='MULTI'">
              <a-col :span="24">
                <a-form-item label="属性模板" name="attTemplate" :label-col="{span:3}" :wrapper-col="{ span: 21}">
                  <a-select
                    v-model:value="state.attrTemplateId"
                    style="width: 300px"
                  >
                    <a-select-option v-for="(item, idx) in state.attrTemplates" :key="idx" :value="item.id">{{ item.name }}</a-select-option>
                  </a-select>
                  <a-button type="info" @click="onConfirmAttr">确认选择</a-button>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item
                  label="属性项" :name="['attrs', 'ownAttrs']" :label-col="{span:3}" :wrapper-col="{ span: 21}">
                  <div
                    v-for="(item, idx) in formState.attrs.ownAttrs" 
                    :key="idx"
                    class="option-box">
                    <div class="box-title">
                      <span class="title">{{ item.name }}</span>
                      <span class="btn">
                        <a-button type="link" @click="onRemoveOption(item)"><close-outlined /></a-button>
                      </span>
                    </div>
                    <div class="box-body">
                      <a-tag v-for="(tag, index) in item.data" :key="index" :closable="true" color="#108ee9" @close="onCloseTag(tag, item)">
                        {{ tag }}
                      </a-tag>
                      <a-input
                        v-if="state.tagInputVisible[item.name]"
                        v-model:value="state.tagInputValue[item.name]"
                        type="text" size="small"
                        :style="{ width: '78px' }"
                        @blur="handleTagInputConfirm(item)"
                        @keyup.enter="handleTagInputConfirm(item)"
                      />
                      <a-tag v-else style="background: #fff; border-style: dashed" @click="onShowTagInput(item)">
                        <plus-outlined />
                      </a-tag>
                    </div>
                  </div>
                  <div class="option-action">
                    <a-button v-if="state.optInputVisible== false" type="info" @click="onShowOptionInput"><plus-outlined />增加属性</a-button>
                    <div v-if="state.optInputVisible== true">
                      <a-input v-model:value="state.optInputValue" style="width: 130px;" />
                      <a-button type="primary" size="small" @click="handleOptionInputConfirm">确定</a-button>
                      <a-button size="small" @click="state.optInputVisible = false">取消</a-button>
                    </div>
                    <a-button type="primary" danger :disabled="formState?.attrs?.ownAttrs?.length ==0" @click.prevent="onGenerateSKU "><plus-outlined />生成规格</a-button>
                  </div>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="SKU" :name="'skuList'" :label-col="{span:3}" :wrapper-col="{ span: 21}">
                  <a-divider orientation="left">批量修改</a-divider>
                  <a-row :gutter="[32,8]">
                    <a-col :span="13">
                      <a-form-item-rest>
                        <image-selecter v-model="batchSku.thumb" :limit="1" />
                      </a-form-item-rest>
                    </a-col>
                    <a-col :span="3">
                      <a-form-item-rest>
                        <a-input-number
                          v-model:value="batchSku.price" style="width: 120px" prefix="￥"
                          placeholder="单价" :precision="2" :min="0" allow-clear />
                      </a-form-item-rest>
                    </a-col>
                    <a-col :span="3">
                      <a-form-item-rest>
                        <a-input-number
                          v-model:value="batchSku.pv" style="width: 120px" prefix="￥" 
                          placeholder="PV" :precision="2" :min="0" allow-clear />
                      </a-form-item-rest>
                    </a-col>
                    <a-col :span="3">
                      <a-form-item-rest>
                        <a-input-number
                          v-model:value="batchSku.availQty" style="width: 120px" :min="0" placeholder="库存量" allow-clear />
                      </a-form-item-rest>
                    </a-col>
                    <a-col :span="2">
                      <a-button type="link" danger @click="onEditBatckSku">更新</a-button>
                    </a-col>
                  </a-row>
                  <a-table :data-source="formState.skuList" :columns="state.skuColumns" :pagination="false">
                    <template #bodyCell="{ column, record }">
                      <template v-if="column.dataIndex == 'price'">
                        <a-form-item-rest>
                          <a-input-number
                            v-model:value="record.price" style="width: 120px"
                            prefix="￥" placeholder="单价" :precision="2" :min="0" allow-clear />
                        </a-form-item-rest>
                      </template>
                      <!-- 进货价 -->
                      <template v-else-if="column.dataIndex == 'pv'">
                        <a-form-item-rest>
                          <a-input-number
                            v-model:value="record.pv" style="width: 120px"
                            prefix="￥" placeholder="PV" :precision="2" :min="0" allow-clear />
                        </a-form-item-rest>
                      </template>
                      <!-- 库存量 -->
                      <template v-else-if="column.dataIndex == 'availQty'">
                        <a-form-item-rest>
                          <a-input-number
                            v-model:value="record.availQty" style="width: 120px"
                            placeholder="库存量" :min="0" allow-clear />
                        </a-form-item-rest>
                      </template>
                      <!-- 操作 -->
                      <template v-else-if="column.dataIndex === 'operation'">
                        <a-button type="link" danger @click="onRemoveSKU(record)">移去</a-button>
                      </template>
                      <!-- 图片 -->
                      <template v-else-if="column.dataIndex === 'thumb'">
                        <a-form-item-rest>
                          <image-selecter v-model="record.thumb" :limit="1" />
                        </a-form-item-rest>
                      </template>
                    </template>
                  </a-table>
                </a-form-item>
              </a-col>
            </a-row>
            <template v-else>
              <a-row v-for="(sku, idx) in formState.skuList" :key="idx">
                <a-col :span="24">
                  <a-form-item label="图片" :name="['skuList', idx ,'thumb']" :label-col="{span:3}" :wrapper-col="{ span: 12}">
                    <image-selecter v-model="sku.thumb" :limit="1" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="条形码" :name="['skuList', idx ,'barCode']" :label-col="{span:3}" :wrapper-col="{ span: 12}">
                    <a-input
                      v-model:value="sku.barCode" show-count :maxlength="20" allow-clear size="large" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="零售价" :name="['skuList', idx ,'price']" :label-col="{span:3}" :wrapper-col="{ span: 12}">
                    <a-input-number
                      v-model:value="formState.price" prefix="￥" placeholder="零售价" :precision="2" 
                      :min="0" allow-clear size="large" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="PV" :name="['skuList', idx ,'pv']" :label-col="{span:3}" :wrapper-col="{ span: 12}">
                    <a-input-number
                      v-model:value="sku.pv" 
                      placeholder="PV值" :precision="2" :min="0" allow-clear size="large" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="可售数量" :name="['skuList', idx ,'availQty']" :label-col="{span:3}" :wrapper-col="{ span: 12}">
                    <a-input-number
                      v-model:value="sku.availQty" :min="0" placeholder="可售数量" allow-clear size="large" />
                  </a-form-item>
                </a-col>
              </a-row>
            </template>
          </a-tab-pane>
          <!-- 详细内容 -->
          <a-tab-pane key="content" force-render>
            <template #tab>
              <span><file-markdown-outlined /> 详细内容</span>
            </template>
            <a-row>
              <a-col :span="24">
                <a-form-item
                  label="详细内容" :name="['extend', 'content']" :label-col="{span:0}" :wrapper-col="{ span: 24}">
                  <d-editor v-model:value="formState.extend.content" :disabled="false" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-tab-pane>
          <!-- 物流设置 -->
          <a-tab-pane key="shipping" force-render>
            <template #tab>
              <span><file-markdown-outlined /> 物流设置</span>
            </template>
            <a-row>
              <a-col :span="24">
                <a-form-item label="物流方式" :label-col="{span:3}" :wrapper-col="{ span: 10}">
                  <a-radio-group v-model:value="formState.shipMode">
                    <a-radio-button value="express">快递</a-radio-button>
                    <a-radio-button value="pickup">自提</a-radio-button>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="运费设置" :label-col="{span:3}" :wrapper-col="{ span: 10}">
                  <a-radio-group v-model:value="formState.expressFeeType">
                    <a-radio-button value="fixed">固定费用</a-radio-button>
                    <a-radio-button value="template">模板费用</a-radio-button>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col v-if="formState.expressFeeType=='fixed'" :span="24">
                <a-form-item label="固定运费" :label-col="{span:3}" :wrapper-col="{ span: 20}">
                  <a-input-number
                    v-model:value="formState.expressPrice"
                    placeholder="固定运费" :precision="2" allow-clear size="large" />
                </a-form-item>
              </a-col>
              <a-col v-if="formState.expressFeeType=='template'" :span="24">
                <a-form-item label="模板" :label-col="{span:3}" :wrapper-col="{ span: 20}">
                  <a-select
                    v-model:value="formState.expressTemplateId"
                    style="width: 320px"
                    placeholder="运费"
                  >
                    <a-select-option v-for="(item, idx) in state.expressTemplates" :key="idx" :value="item.id">{{ item.name }}</a-select-option>
                  </a-select>
                  <a-button type="info">新增模板</a-button>
                </a-form-item>
              </a-col>
            </a-row>
          </a-tab-pane>
          <!-- 营销设置 -->
          <a-tab-pane key="marketing" force-render>
            <template #tab>
              <span><file-markdown-outlined /> 营销设置</span>
            </template>
            <a-row>
              <a-col :span="24">
                <a-form-item label="商品推荐" :name="['marketing', 'recommend']" :label-col="{span:3}" :wrapper-col="{ span: 21}">
                  <a-checkbox-group v-model:value="formState.marketing.recommend" name="checkboxgroup" :options="state.recommendOptions" />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="已售数量" :name="['marketing', 'soldQty']" :label-col="{span:3}" :wrapper-col="{ span: 21}">
                  <a-input-number v-model:value="formState.marketing.soldQty" :min="0" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="购买送积分" :name="['marketing', 'giftScore']" :label-col="{span:3}" :wrapper-col="{ span: 21}">
                  <a-input-number v-model:value="formState.marketing.giftScore" :min="0" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="购买送优惠券" :name="['marketing', 'giftCoupon']" :label-col="{span:3}" :wrapper-col="{ span: 21}">
                  <a-checkbox-group v-model:value="formState.marketing.giftCoupon" name="checkboxgroup" :options="state.recommendOptions" />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="起购数量" :name="['marketing', 'minBuyQty']" :label-col="{span:3}" :wrapper-col="{ span: 10}">
                  <a-input-number v-model:value="formState.marketing.minBuyQty" :min="1" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="是否限购" :name="['marketing', 'isLimitBuy']" :label-col="{span:3}" :wrapper-col="{ span: 10}">
                  <a-radio-group v-model:value="formState.marketing.isLimitBuy">
                    <a-radio-button value="YES">是</a-radio-button>
                    <a-radio-button value="NO">否</a-radio-button>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <template v-if="formState.marketing.isLimitBuy == 'YES'">
                <a-col :span="24">
                  <a-form-item label="限购类型" :name="['marketing', 'limitBuyType']" :label-col="{span:3}" :wrapper-col="{ span: 10}">
                    <a-radio-group v-model:value="formState.marketing.limitBuyType">
                      <a-radio-button value="TIMES">单次限制</a-radio-button>
                      <a-radio-button value="PERSON">单人限制</a-radio-button>
                    </a-radio-group>
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="限购数量" :name="['marketing', 'limitBuyQty']" :label-col="{span:3}" :wrapper-col="{ span: 10}">
                    <a-input-number v-model:value="formState.marketing.limitBuyQty" :min="1" allow-clear />
                  </a-form-item>
                </a-col>
              </template>
              <a-col :span="24">
                <a-form-item label="预售商品" :name="['marketing', 'isPreSale']" :label-col="{span:3}" :wrapper-col="{ span: 10}">
                  <a-radio-group v-model:value="formState.marketing.isPreSale">
                    <a-radio-button value="YES">是</a-radio-button>
                    <a-radio-button value="NO">否</a-radio-button>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <template v-if="formState.marketing.isPreSale == 'YES'">
                <a-col :span="24">
                  <a-form-item label="预售下单时间" :name="['marketing', 'preSaleOrderDate']" :label-col="{span:3}" :wrapper-col="{ span: 10}">
                    <a-range-picker v-model:value="formState.marketing.preSaleOrderDate" show-time />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="预售付款时间" :name="['marketing', 'preSalePayDate']" :label-col="{span:3}" :wrapper-col="{ span: 10}">
                    <a-range-picker v-model:value="formState.marketing.preSalePayDate" show-time />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="预售发货时间" :name="['marketing', 'preSaleSendDate']" :label-col="{span:3}" :wrapper-col="{ span: 10}">
                    <a-range-picker v-model:value="formState.marketing.preSaleSendDate" />
                  </a-form-item>
                </a-col>
              </template>
              <a-col :span="24">
                <a-form-item label="关联用户标签" :name="['marketing', 'userTags']" :label-col="{span:3}" :wrapper-col="{ span: 10}">
                  <a-input-number v-model:value="formState.marketing.userTags" :min="0" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="关联商品" :name="['marketing', 'unionGoods']" :label-col="{span:3}" :wrapper-col="{ span: 21}">
                  <!-- <goods-selecter v-model:value="formState.marketing.unionGoods" :limit="9" /> -->
                </a-form-item>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
        <a-row>
          <a-col :span="24">
            <a-form-item name="id">
              <a-space wrap>
                <a-button type="primary" html-type="submit" size="large" block :loading="state.loading">保存</a-button>
                <a-button size="large" block @click="onCancel">取消</a-button>
                <a-input v-model:value="formState.id" type="hidden" />
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </a-drawer>
</template>
<style lang="less" scoped>
.option-box{ 
  border: 1px solid #f0f0f0;
  margin-bottom: 10px;
  padding: 5px 8px;
  .box-title {
    display: flex;
    justify-content:space-between;
    align-items:center;
    border-bottom: 1px solid #f0f0f0;
    .title {
      font-weight: 600; text-shadow: 2px 2px 4px #e9e7e7; 
    }
  }
  .box-body {
    padding: 5px 12px;
  }
  
}
.option-action {
  padding: 2px 5px;
}

.item {
  width: 100%;
  min-width: 100px;
  height: 40px;
  line-height: 40px;
  background-color: skyblue;
  text-align: center;
  margin: 10px;
  color: #fff;
  font-size: 18px;
}
 
.container {
  border: 1px solid salmon;
  position: relative;
  padding: 0;
  display: flex;
  flex-flow: column wrap;
}
 
.moveing {
  opacity: 0;
}
/* 对移动中的元素应用的过渡 */
.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 0.2s ease;
}
</style>